<template>
  <div>
    <navhead></navhead>
    <div class="let">
      <ul>
        <li :class="{to_active:shows==1}" @click="today_a" ><p>有品推荐</p></li>
        <li :class="{to_active:shows==2}" @click="today_b"><p>手机数码</p></li>
        <li :class="{to_active:shows==3}" @click="today_c"><p>笔记本电脑</p></li>
        <li :class="{to_active:shows==4}" @click="today_d"><p>金典酒饮</p></li>
        <li><p>大家电</p></li>
        <li><p>厨卫电器</p></li>
        <li><p>生活家电</p></li>
        <li><p>个护电器</p></li>
        <li><p>影音娱乐</p></li>
        <li><p>大家电</p></li>
        <li><p>厨卫电器</p></li>
        <li><p>生活家电</p></li>
        <li><p>个护电器</p></li>
      </ul>
      <!-- <navdaohang></navdaohang> -->
    </div>
    <div class="righ">
      <component :is="com"></component>
      <!-- <navA></navA> -->
    </div>

    <foot></foot>
  </div>
</template>

<script>
import foot from "../../components/Footer.vue";
import navhead from "../YZC/components/Classify/navhead.vue";
// import navdaohang from "../views/Classify/navigation.vue"
import navA from "../YZC/components/Classify/navA.vue";
import navB from "../YZC/components/Classify/navB.vue";
import navC from "../YZC/components/Classify/navC.vue";
import navD from "../YZC/components/Classify/navD.vue";




export default {
  data() {
    return {
    com:"navA",
    shows:0,
    };
  },
  components: {
    foot,
    navhead,
    navA,
    navB,
    navC,
    navD,
  },
  methods: {
  today_a(){
this.shows = 1;
this.com='navA'
},
today_b(){
this.shows = 2;
this.com='navB'

},
today_c(){
this.shows = 3;
this.com='navC'
},
today_d(){
this.shows = 4;
this.com='navD'
},
    
    // mounted: {},
  },
};
</script>

<style scoped>
.let {
  float: left;
}

.righ {
  float: right;
}
ul {
  width: 1.02rem;
  background-color: #ffff;
  height: 8.3rem;
  overflow-y: auto;
  /* display: none; */
}
li {
  margin-top: 0.35rem;
  height: 0.4rem;
  /* margin-left: 0.2rem; */
  border-radius: 0.08rem;
  line-height: 0.4rem;
  text-align: center;
}
p {
  font-size: 0.16rem;
}
.to_active {background: #409eff!important;color: #fff;}
</style>
